<template>
  <div class="list">
    <div class="header">
      <Lheader>
        <h3 slot="tit">购物车</h3>
      </Lheader>
    </div>
    <div class="box">
      <div
        v-for="(item,index) in shoPing"
        :key="item.Sales"
      >
        <Lsettlement :const="item" :index="index"></Lsettlement>
      </div>
        

    </div>
    <div class="tab">
      <Ltab></Ltab>
    </div>
    <!-- 购物车列表 -->
    <div class="jie">
      合计:
      <span class="he">￥{{$store.state.he}}</span>
      <div class="btnEnd" @click="jie">去结算</div>
    </div>
  </div>
</template>

<script>
import Lheader from './components/LheaderView.vue';
import Lsettlement from './components/Lsettlement.vue'; //单个商品
import Ltab from './components/LtabView.vue';  //tab切换
// import { mapGetters } from 'vuex';
export default {
  name:'CartList',
  data(){
    return{
      shoPing:[], //购物车数据
      flag:false, //判断购物车是否为空跳转页面
      he:0 //结算总和
    }
  },
  components:{
    Lheader, //头部
    Lsettlement, //单个商品
    Ltab, //tab切换
  },
  // 
  // computed:{
  //   ...mapGetters(['gets'])
  // },
  watch:{
    shoPing(){
      // console.log(this.$store.state.shopping);
      // 购物车为空时可以跳转页面
      if(this.$store.state.shopping == 0){
        // this.flag = true;
        // if(this.flag){
          this.flag = false;
          this.$router.push('/');
        // }
      }
    }
  },
  created(){
    this.shoPing = this.$store.state.shopping;
    this.he=this.$store.state.he
    // this.he = this.$store.state.he;
    
    // 路由跳转 判断vuex购物车是否有值
    // $store.getters.getter
  },
  mounted(){
    // if(this.flag){
    //   this.tiao();
    // }
    this.initialize()
  },
  // updated(){
  //   console.log(this.$store.state.shopping.length);
  // },
  methods:{
    jie(){
      console.log('结算');
      this.$router.push('/Payment');
    },
    initialize(){
      this.$store.commit('initialize')
    }
    // tiao(){
    //   this.$router.push('/');
    // }
  }
}
</script>

<style scoped lang="less">
.list{
  background-color: rgb(235, 233, 233);
  height: 100vh;
  overflow-x: hidden;
  .tab{
    margin-top: .3rem;
  }
  .header{
    height: .88rem;
    border-bottom: solid 1px #ccc;
  }
  .jie{
    height: 1rem;
    width: calc(100% - .4rem);
    padding-left: .4rem;
    border-top: solid .01rem #ccc;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9;
    background-color: #fff;
    display: flex;
    align-items: center;
    font-size: .4rem;
    .he{
      color: rgb(254, 143, 40);
    }
    .btnEnd{
      height: 100%;
      width: 2.5rem;
      position: absolute;
      line-height: 1rem;
      text-align: center;
      color: #fff;
      right: 0;
      top: 0;
      background-color: #FF734C;
    }
  }
}
</style>